<link href="css/buttons.dataTables.min.css" rel="stylesheet">
<link href="css/select.dataTables.min.css" rel="stylesheet">

<div class="row">
    <div id="breadcrumb" class="col-md-12">
        <ol class="breadcrumb">
            <li><a href="#">物业管理</a></li>
            <li><a href="#">物业信息</a></li>
        </ol>
    </div>
</div>
<div class="row">
    <div class="col-xs-12">
        <div class="box">
            <div class="box-header">
                <div class="box-name">
                </div>
                <div class="box-icons">
                    <a class="expand-link">
                        <i class="fa fa-expand"></i>
                    </a>
                </div>
                <div class="no-move"></div>
            </div>
            <div class="box-content no-padding">
                <div class="box-content" style="padding-bottom:0px;padding-left: 30px">
                    <div class="row">
                        <div class="col-md-3">
                            <label for="propertyType">物业类型</label>
                            <select name="propertyType" id="propertyType">
                                <option value="0">所有类型</option>
                                <option value="1">商户</option>
                                <option value="2">住宅</option>
                            </select>
                        </div>
                        <div class="col-md-8">
                            <label for="propertyStatus">物业状态</label>
                            <select name="propertyStatus" id="propertyStatus">
                                <option value="0">所有状态</option>
                                <option value="-1">出租</option>
                                <option value="1">自用</option>
                            </select>
                            <button id="doFilterBtn">确定</button>
                        </div>
                    </div>
                </div>
                <table class="table table-bordered table-striped table-hover table-heading table-datatable"
                       id="propertyListTable">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>房产编号</th>
                        <th>物业类型</th>
                        <th>地址信息</th>
                        <th>面积</th>
                        <th>所属楼栋</th>
                        <th>状态</th>
                        <th>更新时间</th>
                        <th>更多信息</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                    <tfoot>
                    <tr>
                        <th>序号</th>
                        <th>房产编号</th>
                        <th>物业类型</th>
                        <th>地址信息</th>
                        <th>面积</th>
                        <th>所属楼栋</th>
                        <th>状态</th>
                        <th>更新时间</th>
                        <th>更多信息</th>
                        <th>操作</th>
                    </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" role="dialog" id="moreInfoModel">
    <div class="modal-dialog modal-lg" role="dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="">物业详细信息</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-12">
                            <h3>费用信息</h3>
                            <ul class="list-group" id="feeInfo">
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<div class="modal fade" role="dialog" id="editInfoModel">
    <div class="modal-dialog" style="width: 80%;" role="dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="">修改物业信息</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-12">
                            <form id="editPropertyForm" method="post"
                                  class="form-horizontal">
                                <fieldset>
                                    <input type="hidden" name="id"/>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">房产编号</label>
                                        <div class="col-sm-8">
                                            <input type="text" class="form-control" name="code" disabled="disabled"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">物业类型</label>

                                        <div class="col-sm-8">
                                            <select disabled="disabled" class="form-control" name="type" id="type">
                                                <option value="1">商户</option>
                                                <option value="2">住宅</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">地址</label>

                                        <div class="col-sm-8">
                                            <input type="text" disabled="disabled" class="form-control" name="location"/>
                                        </div>
                                    </div>
                                    <div class="form-group has-feedback">
                                        <label class="col-sm-2 control-label">面积</label>
                                        <div class="col-sm-8">
                                            <input type="text" disabled="disabled" id="propertySquare" name="propertySquare"
                                                   class="form-control" placeholder="">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">状态</label>
                                        <div class="col-sm-8">
                                            <select id="status" name="status" class="form-control">
                                                <option value="-1">出租</option>
                                                <option value="1">自用</option>
                                            </select>
                                        </div>
                                    </div>
                                </fieldset>
                                <div class="form-group">
                                    <div class="col-sm-9 col-sm-offset-2">
                                        <button type="submit" class="btn btn-primary">保存修改</button>
                                        <button type="button" id="addOwnerBtn" class="btn btn-primary">添加业主</button>
                                    </div>
                                </div>
                            </form>
                            <fieldset>
                                <legend>业主列表</legend>
                                <div class="panel-group" id="ownerList" role="tablist" aria-multiselectable="true">
                                </div>
                            </fieldset>
                            <form id="ownerAddForm" method="post" action="" style="display: none" class="form-horizontal">
                                <fieldset>
                                    <legend>添加业主</legend>
                                    <div class="form-group">
                                        <div class="col-sm-6">
                                            <input type="hidden" class="form-control" id="propertyID" name="propertyID" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">姓名</label>
                                        <div class="col-sm-8">
                                            <input type="text" class="form-control" name="name" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">性别</label>
                                        <div class="col-sm-8">
                                            <select class="form-control" name="sex">
                                                <option value="0">男</option>
                                                <option value="1">女</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">电话号码</label>
                                        <div class="col-sm-8">
                                            <input type="text" class="form-control" name="phone" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">证件类型</label>
                                        <div class="col-sm-8">
                                            <select name="identityType" class="form-control" id="identityType">
                                                <option value="1">身份证</option>
                                                <option value="2">军人证</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">证件号码</label>
                                        <div class="col-sm-8">
                                            <input type="text" class="form-control" name="identityCode" />
                                        </div>
                                    </div>
                                    <div class="form-group has-feedback">
                                        <label class="col-sm-2 control-label">入住时间</label>
                                        <div class="col-sm-8">
                                            <input type="text" id="authTime" name="authTime"
                                                   class="form-control input_date" placeholder="">
                                        </div>
                                    </div>
                                </fieldset>
                                <div class="form-group">
                                    <div class="col-sm-9 col-sm-offset-2">
                                        <button type="submit" class="btn btn-primary">确定添加</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script type="text/javascript">
    var editTable;
    $("#doFilterBtn").click(function(){
        editTable.draw();
    });

    $('#propertyListTable tbody').on( 'click', 'button#delRowBtn', function () {
        var data = editTable.row($(this).parents('tr') ).data();
        var con=confirm("确定删除该物业?");
        if(con) {
            $.ajax({
                type: "get",
                async: false,
                url: urlConfig.deleteProperty + data.id,
                dataType: "json", //返回数据形式为json
                success: function (result) {
                    if (result.status) {
                        editTable.ajax.reload(null, false);
                        alert("删除成功");
                    }
                    else {
                        alert(result.errorMsg.description);
                    }
                },
                error: function () {
                    alert("服务器连接失败,请重试!");
                }
            });
        }
    });

    /**
     * 编辑物业信息
     */
    $('#propertyListTable tbody').on( 'click', 'button#editRow', function () {
        $("#editInfoModel").modal("show");
        $("#ownerAddForm").slideUp("10000");
        $("#ownerAddForm")[0].reset();
        $("#addOwnerBtn").text("添加业主");
        var data = editTable.row($(this).parents('tr') ).data();
        $("#propertyID").val(data.id);
        $.ajax({
            type: "get",
            async: true,
            url: urlConfig.getOwnerInfoByPropertyID+data.id,
            dataType: "json", //返回数据形式为json
            success: function (result) {
                if (result.status) {
                    if(result.jsonString!=null)
                    {
                        var html="";
                        var date=new Date();
                        for(var i in result.jsonString)
                        {
                            if(result.jsonString[i].identityType==0)
                                result.jsonString[i].identityType="身份证";
                            else if(result.jsonString[i].identityType==1)
                                result.jsonString[i].identityType="军官证";
                            else result.jsonString[i].identityType="未设置"
                            if(result.jsonString[i].sex==0)
                                result.jsonString[i].sex="男";
                            else if(result.jsonString[i].sex==1)
                                result.jsonString[i].sex="女";
                            else result.jsonString[i].sex="未设置";

                            date.setTime(result.jsonString[i].birthday);
                            result.jsonString[i].birthday=date.toLocaleDateString().replace(/\//g, "-");

                            date.setTime(result.jsonString[i].authenticationTime);
                            result.jsonString[i].authenticationTime=date.toLocaleDateString().replace(/\//g, "-");

                            html+='<div class="panel panel-default" id="'+result.jsonString[i].phone+'">'+
                                    '<div class="panel-heading" role="tab" id="">'+
                                        '<h4 class="panel-title">'+
                                            '<a class="collapsed" role="button" data-toggle="collapse"'+
                                            'data-parent="#ownerList" href="#'+result.jsonString[i].id+'" aria-expanded="false" >'+
                                                result.jsonString[i].name+'－'+result.jsonString[i].phone+
                                            '</a>'+
                                            '&ensp;<a class="btn-warning btn-sm" id="deleteOwnerBtn" href="javascript:deleteOwner('+
                                            result.jsonString[i].phone+');">删除</a>'+
                                        '</h4>'+
                                    '</div>'+
                                    '<div id="'+result.jsonString[i].id+'" class="panel-collapse collapse" role="tabpanel" aria-labelledby="">'+
                                      '<div class="panel-body">'+
                                        '证件类型:'+result.jsonString[i].identityType+'<br/>'+
                                        '证件号码:'+result.jsonString[i].identityCode+'<br/>'+
                                        '紧急联系人姓名:'+result.jsonString[i].urgentName+'<br/>'+
                                            '紧急联系人电话:'+result.jsonString[i].urgentPhone+'<br/>'+
                                            '性别:'+result.jsonString[i].sex+'<br/>'+
                                            '出生日期:'+result.jsonString[i].birthday+'<br/>'+
                                            '认证时间:'+result.jsonString[i].authenticationTime+
                                      '</div>'+
                                    '</div>'+
                                  '</div>';
                        }
                        $("#ownerList").html(html);
                    }
                    else
                    {
                        $("#ownerList").html("该物业暂未绑定业主");
                    }
                }
                else
                {
                    $("#ownerInfo").html(result.errorMsg.description);
                }
            },
            error: function () {
                $("#ownerInfo").html("服务器连接失败");
            }
        });

        $("input[name=code]").val(data.code);
        $("input[name=id]").val(data.id);
        $("#type").val(data.type);
        $("#status").val(data.status);
        $("input[name=location]").val(data.location);
        $("input[name=propertySquare]").val(data.propertySquare);
//        console.log(data.villageId);
        $("#village").val(data.villageId);
//        console.log(data);
    });

    function propertyModifyValidator() {
        $('#editPropertyForm').bootstrapValidator({
            message: '存在非法输入',
            fields: {
                location:{
                    validators: {
                        notEmpty: {
                            message: '地址不能为空'
                        }
                    }
                },
                type:{
                    validators: {
                        notEmpty: {
                            message: '请选择物业类型'
                        }
                    }
                },
                status:{
                    validators: {
                        notEmpty: {
                            message: '请选择物业状态'
                        }
                    }
                },
                propertySquare: {
                    validators: {
                        notEmpty: {
                            message: '面积不能为空'
                        },
                        regexp: {
                            regexp: /^(([1-9]\d*)|0)(\.\d{1,2})?$/,
                            message: '面积只能为两位小数或整数'
                        }
                    }
                }
            }
        })
                .on("success.form.bv",function(e){
                    e.preventDefault();
                    submitForm();
                });
    }
    function submitForm()
    {
        var fields = $("#editPropertyForm").serializeArray();
        $.ajax({
            type: "post",
            async: false,
            url: urlConfig.modifyProperty,
            data: fields,
            dataType: "json", //返回数据形式为json
            success: function (result) {
                if (result.status) {
                    alert("修改成功");
                    editTable.ajax.reload( null, false );
                }
                else
                {
                    alert(result.errorMsg.description);
                }
            },
            error: function () {
                alert("服务器连接失败,请重试!");
            }
        });
    }
    $("#addOwnerBtn").click(function(){
        if($("#ownerAddForm").css('display')=='none')
        {
            $("#ownerAddForm").slideDown("10000");
            $("#addOwnerBtn").text("取消添加");
        }
        else
        {
            $("#ownerAddForm").slideUp("10000");
            $("#ownerAddForm")[0].reset();
            $("#addOwnerBtn").text("添加业主");
        }
//        $("#ownerAddForm").show();
    });
    //验证业主信息的合法性
    function ownerAddValidator(){
        $('#ownerAddForm').bootstrapValidator({
            message: '存在非法输入',
            fields: {
                name: {
                    message: '用户名不合法',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        },
                        stringLength: {
                            min: 2,
                            max: 10,
                            message: '用户名在2到10个字符之间'
                        }
                    }
                },
                address:{
                    validators: {
                        notEmpty: {
                            message: '地址不能为空'
                        }
                    }
                },
                identityCode:{
                    validators: {
                        notEmpty: {
                            message: '证件号码不能为空'
                        },
                        regexp: {
                            regexp:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
                            message: '证件号码不合法'
                        }
                    }
                },
                phone: {
                    validators: {
                        notEmpty: {
                            message: '电话号码不能为空'
                        },
                        regexp: {
                            regexp: /^1[3-8][0-9]{9}$/,
                            message: '电话号码不合法'
                        }
                    }
                }
            }
        }).on("success.form.bv",function(e){
            e.preventDefault();
            submitOwnerForm();
        });
    }
    //验证通过后提高业主信息表单
    function submitOwnerForm()
    {
        var data=$("#ownerAddForm").serializeArray();
        console.log(data);
        $.ajax({
            type: "post",
            async: true,
            url: urlConfig.addOwner,
            data: data,
            dataType: "json", //返回数据形式为json
            success: function (result) {
                if (result.status) {
                    var html='<div class="panel panel-default" id="'+result.jsonString.phone+'">'+
                            '<div class="panel-heading" role="tab" id="">'+
                            '<h4 class="panel-title">'+
                            '<a class="collapsed" role="button" data-toggle="collapse"'+
                            'data-parent="#ownerList" href="#'+result.jsonString.id+'" aria-expanded="false" >'+
                            result.jsonString.name+'－'+result.jsonString.phone+
                            '</a>'+
                            '&ensp;<a class="btn-warning btn-sm" id="deleteOwnerBtn" href="javascript:deleteOwner('+
                            result.jsonString.phone+');">删除</a>'+
                            '</h4>'+
                            '</div>'+
                            '<div id="'+result.jsonString.id+'" class="panel-collapse collapse" role="tabpanel" aria-labelledby="">'+
                            '<div class="panel-body">'+
                            '证件类型:'+result.jsonString.identityType+'<br/>'+
                            '证件号码:'+result.jsonString.identityCode+'<br/>'+
                            '紧急联系人姓名:'+result.jsonString.urgentName+'<br/>'+
                            '紧急联系人电话:'+result.jsonString.urgentPhone+'<br/>'+
                            '性别:'+result.jsonString.sex+'<br/>'+
                            '出生日期:'+result.jsonString.birthday+'<br/>'+
                            '认证时间:'+result.jsonString.authenticationTime+
                            '</div>'+
                            '</div>'+
                            '</div>';
                    $("#ownerList").append(html);
                    var con=confirm("添加成功,是否继续添加?");
                    if(con)
                    {
                        $("#ownerAddForm")[0].reset();
                    }
                    else
                    {
                        $("#ownerAddForm").slideUp("10000");
                        $("#ownerAddForm")[0].reset();
                        $("#addOwnerBtn").text("添加业主");
                    }
                }
                else
                {
                    alert(result.errorMsg.description);
                }
            },
            error: function () {
                alert("服务器连接失败,请重试!");
            }
        });
    }

    //删除业主
    function deleteOwner(phone)
    {
        var con=confirm("确定删除该业主?");
        if(con) {
            $.ajax({
                type: "get",
                async: true,
                url: urlConfig.deleteOwner,
                data:
                {
                    phone:phone,
                    propertyID:$("#propertyID").val()
                },
                dataType: "json", //返回数据形式为json
                success: function (result) {
                    if (result.status) {
                        alert("删除成功");
                        $("#"+phone).remove();
                    }
                    else {
                        alert("删除失败\n"+result.errorMsg.description);
                    }
                },
                error: function () {
                    alert("服务器连接失败,请重试!");
                }
            });
        }
    }
    /**
     * 查看物业详细信息
     */
    $('#propertyListTable tbody').on( 'click', 'button#detailRow', function () {
        $("#moreInfoModel").modal("show");
        var data = editTable.row($(this).parents('tr') ).data();
        $.ajax({
            type: "get",
            async: false,
            url: urlConfig.getFeeInfoByPropertyID+data.id,
            dataType: "json", //返回数据形式为json
            success: function (result) {
                if (result.status) {
                    if(result.jsonString.length>0)
                        html="";
                    else
                        html="该物业未绑定费用";
                    for(var i in result.jsonString) {
                        html += '<li class="list-group-item">' +
                                '费用名称: <span id="name">' + result.jsonString[i].feeItemEntity.name + '</span>' +
                                '&ensp;费用单价:<span id="name">' + result.jsonString[i].feeItemEntity.ruleEntity.unitPrice +
                                '</span>'+
                                '</li>';
                    }
                    $("#feeInfo").html(html);
                }
                else
                {
                    $("#feeInfo").html("该物业未绑定费用");
                }
            },
            error: function () {
                $("#feeInfo").html("服务器连接失败,请重试!");
            }
        });
    });

    //初始化表格数据
    function initDataTable(){
        editTable=$('#propertyListTable').DataTable({
            "processing":true,
            "serverSide": true,
            "ajax":{
                "url": urlConfig.propertyList,
                "data":function ( d ) {
                    d.propertyType = $("#propertyType option:selected").val();
                    d.propertyStatus = $("#propertyStatus option:selected").val();
                },
                "dataSrc": "jsonString"
            },
            "columnDefs": [{
                "targets": 0,
                "data":null,
                "orderable": false,
                "searchable": false,
                "createdCell": function (nTd, sData, oData, iRow, iCol) {
                    var startnum=this.api().page()*(this.api().page.info().length);
                    $(nTd).html(iRow+1+startnum);
                }
            },{
                "targets": 1,
                "data":"code",
                "visible": true,
                "orderable": false,
                "searchable": true

            },{
                "targets": 2,
                "data":"type",
                "visible": true,
                "orderable": false,
                "searchable": false,
                "render": function ( data, type, row ) {
                    if (data==1)
                        return "<font color='#0000cd'>商户</font>";
                    else if (data==2)
                        return "<font color='#b8860b'>住宅</font>";
                    else if(data==3)
                        return "<font color='#d2691e'>车位</font>";
                    else
                        return "<font color='red'>数据异常</font>"
                }
            },{
                "targets": 3,
                "data":"location",
                "visible": true,
                "orderable": false,
                "searchable": false
            },{
                "targets": 4,
                "data":"propertySquare",
                "visible": true,
                "orderable": false,
                "searchable": false
            },{
                "targets": 5,
                "data": "buildingEntity",
                "orderable": false,
                "searchable": false,
                "render": function ( data, type, row ) {
                    return data.buildingCode+"--"+data.buildingName;
                }
            },{
                "targets": 6,
                "data": "status",
                "orderable": false,
                "searchable": false,
                "render": function ( data, type, row ) {
                    if (data==-1)
                        return "<font color='#00008b'>出租</font>";
                    else if (data==1)
                        return "<font color='green'>自用</font>";
                    else
                        return "<font color='red'>数据异常</font>";
                }
            },{
                "targets": 7,
                "data": "modifyTime",
                "orderable": false,
                "searchable": false,
                "render": function ( data, type, row ) {
                    return formatDate(data,"yyyy-MM-dd");
                }
            },{
                "targets": 8,
                "data": null,
                "orderable": false,
                "searchable": false,
                "defaultContent":
                        "<button id='detailRow' class='btn btn-primary' type='button'>查看</button>"
            },{
                "targets": 9,
                "data": null,
                "orderable": false,
                "searchable": false,
                "defaultContent":
                    "<button id='editRow' class='btn btn-primary' type='button'>编辑</button>&ensp;"+
                    "<button id='delRowBtn' class='btn btn-primary' type='button'>删除</button>&ensp;"
            }],
            "aaSorting": [[ 1, "asc" ]],
            "autoWidth":false,
            "sDom":
                    "<'box-content'<'col-sm-6'f><'col-sm-6 text-right'l><'clearfix'>>tr<'box-content'<'col-sm-6'i><'col-sm-6 text-right'p><'clearfix'>>",
            "language": {
                "emptyTable":     "没有相关数据",
                "info": "显示 _START_ 到 _END_ 条, 共 _TOTAL_ 条记录",
                "infoEmpty":      "没有相关数据",
                "infoFiltered":   "(筛选自 _MAX_ 条记录)",
                "infoPostFix":    "",
                "thousands":      ",",
                "lengthMenu":     "每页显示 _MENU_ 条",
                "loadingRecords": "加载中",
                "processing":     "数据处理中",
                "search":         "搜索:",
                "zeroRecords":    "没有找到匹配数据",
                "paginate": {
                    "first":      "首页",
                    "last":       "末页",
                    "next":       "下一页",
                    "previous":   "上一页"
                },
                "aria": {
                    "sortAscending":  ":正序",
                    "sortDescending": ":倒序"
                }
            }
        });
    }

    $(document).ready(function() {
        LoadDataTablesScripts(initDataTable);
        LoadBootstrapValidatorScript(propertyModifyValidator);
        LoadBootstrapValidatorScript(ownerAddValidator);
        $('.input_date').datepicker({setDate: new Date(),dateFormat:"yy-mm-dd",
            showButtonPanel:true,
            closeText:"关闭",
            yearSuffix: '年',
            currentText:'今天',
            showMonthAfterYear:true,
            monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
            dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
            dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
            dayNamesMin: ['日','一','二','三','四','五','六']
        });
    });
</script>
